<template>
  <div class="app-container test_height_form">
    <!-- 拖拽导入区 -->
    <upload-excel-component
      class="excel-h"
      @on-selected-file="selected"
      @on-upload-start-file="uploadStart"
      @on-upload-end-file="uploadEnd"
    ></upload-excel-component>
    <!-- :disabled="importdisabled" -->
    <a
      href="../../../static/data/execl/kasCustomerImportTemplate.xlsx"
      download="kasCustomerImportTemplate.xlsx"
    >
      <el-button
        class="filter-item"
        size="small"
        style="margin-left: 10px;margin-bottom: 20px"
        type="primary"
        v-waves
        icon="el-icon-upload2"
        :disabled="exportdisabled"
        @click="exportData"
      >导入示例模板下载
      </el-button>
    </a>

    <!-- <a href="../../../static/data/execl/kasCustomerImportTemplate.xlsx" download="kasCustomerImportTemplate.xlsx">导入示例模板下载</a> -->
    <!-- <a :href="exportModel" download="kasCustomerImportTemplate.xlsx">导入示例模板下载</a> -->
    <el-button
      class="filter-item"
      size="small"
      style="margin-left: 10px;margin-bottom: 20px"
      type="primary"
      v-waves
      icon="el-icon-upload2"
      :disabled="importdisabled"
      @click="importData"
    >导入
    </el-button>
    <span style="font-size:14px;">导入数据请小于5M</span>

    <div style="width: 100%;position: relative;">
      <!-- fullscreenLoading -->
      <v-loading v-if="fullscreenLoading"></v-loading>
      <!--列表-->
      <!-- :height="table_height" -->
      <el-table
        :key="tableKey"
        :data="tableData"
        border
        highlight-current-row
        fit
        element-loading-text="数据越多上传时间越久"
        style="width: 100%;"
        :height="table_height"
        class="app-h100"
      >
        <el-table-column
          v-for="item of tableHeader"
          :prop="item"
          :label="item"
          :key="item"
          style="width: auto;"
        ></el-table-column>
      </el-table>
    </div>


    <!--  分页 -->
    <!-- <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.current"
                     :page-sizes="[10,20,30, 50]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>-->
  </div>
</template>

<script type="text/javascript">
  import {importExperses} from "@/api/pay/otherExpenses";
  import UploadExcelComponent from "@/components/UploadExcel/index.vue";
  import waves from "@/directive/waves";
  import Loading from "@/components/loading/loading.vue";
  // import exportModel from '^/data/execl/kasCustomerImportTemplate.xlsx'
  export default {
    name: "orderMgt",
    directives: {
      waves
    },
    components: {UploadExcelComponent, "v-loading": Loading},
    data() {
      return {
        text: {
          header: [],
          row: []
        },
        tableData: [],
        tableHeader: [],
        fullscreenLoading: false,
        tableKey: 0,
        table_height: 0,
        importdisabled: true,
        tableloading: false,
        exportdisabled: false,
        tableData2: []
        // exportUrl: require('../../assets/execl/kasCustomerImportTemplate.xlsx')
      };
    },
    mounted() {
      const that = this;
      // 屏幕大小适配
      // const f_h = (document.getElementsByClassName('test_height_form')[0]).offsetHeight
      const app_h = document.getElementsByClassName("app-h100")[0].offsetHeight;
      const cha = app_h - 360;
      // if (cha > 400) {
      //   cha = 400
      // }
      that.table_height = cha;
    },
    methods: {
      selected(data) {
        this.fullscreenLoading = true;
        if (this.fullscreenLoading) {
          this.importdisabled = false;
        }
        this.tableData2 = data.results;
        this.tableHeader = data.header;
        this.fullscreenLoading = false;
        this.$notify({
          title: "解析完成",
          dangerouslyUseHTMLString: true,
          message:
            "已解析" + this.tableData2.length + "条记录 <br/>请点击导入按钮",
          type: "success",
          duration: 0
        });

      },
      importData() {
        // 确定导入
        const that = this;
        this.fullscreenLoading = true;
        this.importdisabled = true;
        importExperses(that.tableHeader, that.tableData2).then(result => {
          if (result.code === 0) {
            if (result.data !== null) {
              const updatedHeader = JSON.parse(result.data.header);
              const updatedRows = JSON.parse(result.data.rows);
              const rows_err = JSON.parse(result.data.rows_err);
              const rows_successed = JSON.parse(result.data.rows_successed);
              that.fullscreenLoading = true;
              that.tableHeader = updatedHeader;
              that.tableData = updatedRows;

              // this.total = result.data.total
              if (rows_successed > 0) {
                this.$notify({
                  title: "处理完成",
                  dangerouslyUseHTMLString: true,
                  //"导入成功[" + rows_successed + "]条,失败[" + rows_err + ']条,失败数据详见表格'
                  message: "导入成功[" + rows_successed + "]条,失败[" + rows_err + "]条,<br/>失败数据详见表格",
                  type: "success",
                  duration: 0
                });
              } else {
                that.$notify({
                  title: "失败提示",
                  message: "导入失败[" + rows_err + "]条",
                  type: "error",
                  duration: 0
                });
              }
              that.updatedData();
            } else {
              console.log("返回data为空", result.data);
            }
            that.fullscreenLoading = false;
            that.importdisabled = false;
          } else {
            that.$notify({
              title: "信息提示",
              message: result.message,
              type: "error",
              duration: 0
            });
            that.fullscreenLoading = false;
            that.importdisabled = false;
          }
        });
      },
      exportData() {
        // 导入的模板示例模板
        // const that = this
        // window.open(that.exportUrl)
        // window.open('/assets/execl/kasCustomerImportTemplate.xlsx', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
        // const myA = document.createElement('a')
        // myA.href = '../../../static/data/execl/kasCustomerImportTemplate'
        // myA.click()
        // window.location.href('../execl/kasCustomerImportTemplate.xlsx')
      },
      updatedData() {
        console.log("再次更新");
      },
      uploadStart(val) {
        this.fullscreenLoading = val;
        console.log("uploadStart-loding-true", this.fullscreenLoading);
      },
      uploadEnd(val) {
        this.fullscreenLoading = val;
        console.log("uploadEnd-loding-false", this.fullscreenLoading);
      }
    }
  };
</script>

<style type="text/css" scoped>
</style>
